<div class="layui-row layui-col-space15">
    <div class="layui-col-xs6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                管理数<span class="layui-badge layui-bg-blue pull-right">总</span>
            </div>
            <div class="layui-card-body">
                <p class="lay-big-font" id="adminNum">0</p>
                <p style="text-align: right;"><i class="layui-icon layui-icon-flag"></i></span></p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                帖子数<span class="layui-badge layui-bg-black pull-right">总</span>
            </div>
            <div class="layui-card-body">
                <p class="lay-big-font" id="infoNum">0</p>
                <p style="text-align: right;"><i class="layui-icon layui-icon layui-icon-rate"></i></span></p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                文章数<span class="layui-badge layui-bg-green pull-right">总</span>
            </div>
            <div class="layui-card-body">
                <p class="lay-big-font" id="rticleatNum">0</p>
                <p style="text-align: right;"><i class="layui-icon layui-icon-read"></i></span></p>
            </div>
        </div>
    </div>
    <div class="layui-col-xs6 layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">
                活跃用户<span class="layui-badge layui-bg-orange pull-right">总</span>
            </div>
            <div class="layui-card-body">
                <p class="lay-big-font" id="userNum">0</p>
                <p style="text-align: right;"><i class="layui-icon layui-icon-user"></i></span></p>
            </div>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space15">
    <div>
        <div>
            <div class="layui-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-sm12 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">最新一周新增用户</div>
                            <div class="layui-card-body" style="min-height: 280px;">
                                <div id="main1" class="layui-col-sm12" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm12 layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">cpu使用量</div>
                            <div class="layui-card-body" style="min-height: 280px;">
                                <div id="main4" class="layui-col-sm12" style="height: 300px;"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="display: flex;justify-content: space-around;">
        <div style="flex:0 0 33%;background-color: #ffffff;">
            <div class="layui-card-header">后台框架</div>
            <div class="layui-card-body">
                <table class="layui-table layui-text">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>核心框架</td>
                            <td>NodeJs、MVC、express</td>
                        </tr>
                        <tr>
                            <td>持久层</td>
                            <td>mysql、json</td>
                        </tr>
                        <tr>
                            <td>后台核心</td>
                            <td>JS、Css、Es6、layui、Html5</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div style="flex:0 0 33%;background-color: #ffffff;">
            <div class="layui-card-header">前端框架</div>
            <div class="layui-card-body">
                <table class="layui-table layui-text">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>核心框架</td>
                            <td>Uniapp、Vue</td>
                        </tr>
                        <tr>
                            <td>核心技术</td>
                            <td>JS、Css、Es6、layui、Html5</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div style="flex:0 0 33%;background-color: #ffffff;">
            <div class="layui-card-header">开发团队</div>
            <div class="layui-card-body">
                <table class="layui-table layui-text">
                    <colgroup>
                        <col width="100">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>团队成员</td>
                            <td>******</td>
                        </tr>
                        <tr>
                            <td>项目耗时</td>
                            <td>2个月</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
<style>
    .card {
        width: 100%;
    }
</style>
<script>
    layui.use(['carousel', 'element', 'jquery', 'admin'], function () {
        var carousel = layui.carousel;
        var element = layui.element;
        var $ = layui.jquery;
        var admin = layui.admin;
        layui.link('assets/css/console.css');
        $(function () {
            admin.myAjax({
                url: "getIndexCount",
                success: function (res) {
                    if (res.code) {
                        let data = res;
                        if (data.code) {
                            $('#adminNum').text(data.adminNum)
                            $('#infoNum').text(data.infoNum)
                            $('#rticleatNum').text(data.rticleatNum)
                            $('#userNum').text(data.userNum)
                        }
                    }
                }
            })

            // 基于准备好的dom，初始化echarts实例
            var main1 = echarts.init(document.getElementById('main1'));
            // 指定图表的配置项和数据
            var option = {
                grid: {
                    top: '5%',
                    right: '1%',
                    left: '1%',
                    bottom: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '用户量',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    type: 'line'
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            main1.setOption(option);

            admin.myAjax({
                url: "getuserNumTable",
                success: function (res) {
                    main1.hideLoading();
                    if (res.code) {
                        let data = res;
                        main1.setOption({
                            series: [
                                {
                                    name: '用户量',
                                    data: data.userNum,
                                    type: 'line'
                                }
                            ]
                        })
                    }
                }
            })

            // 基于准备好的dom，初始化echarts实例
            var main4 = echarts.init(document.getElementById('main4'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                series: [
                    {
                        name: 'cpu使用量',
                        type: 'gauge',
                        detail: { formatter: '{value}%' },
                        data: [{ value: 0, name: '已使用' }]
                    }
                ]
            };

            admin.myAjax({
                url: "getCpuTable",
                success: function (res) {
                    main4.hideLoading();
                    if (res.code) {
                        let data = res;
                        main4.setOption({
                            series: [
                                {
                                    data: [
                                        { value: Number(data.CpuNum), name: '已使用' }
                                    ]
                                }
                            ]
                        })
                    }
                }
            })

            // 使用刚指定的配置项和数据显示图表。
            main4.setOption(option);
        })
    });

</script>